<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>申办食品经营许可证</title>
    <link rel="stylesheet" href="#(basePath)/static/jquery-weui/css/weui.min.css">
    <link rel="stylesheet" href="#(basePath)/static/jquery-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="#(basePath)/static/web/index/css/index.css">
    <style type="text/css">
        body, .page__bd {
            background: #ffffff;
        }

        .weui-btn_mini {
            padding: 0.32em 1.32rem;
        }
    </style>
</head>
<body>
<div class="page" style="margin-top: 50px;">
    <div class="page__bd page__bd_spacing">
        <div id="editor">
            <div style="padding: 0px 10px;">
                <div class="js-signature" data-height="350" data-border="1px solid #E6E6E6" data-line-color="#000000"
                     data-auto-fit="true"></div>
            </div>
            <div class="weui-btn-area" style="text-align: center">
                <button type="button" id="clearBtn" class="weui-btn weui-btn_mini weui-btn_default"
                        onclick="clearCanvas();">清除
                </button>&nbsp;
                <button type="button" id="saveBtn" class="weui-btn weui-btn_mini weui-btn_primary weui-btn_disabled"
                        onclick="initSignature();" disabled>确认
                </button>
            </div>
        </div>
        <div id="show" style="display: none;">
            <div class="content" style="text-align: center">

            </div>
            <div class="weui-btn-area">
                <button type="button" class="weui-btn weui-btn_primary" onclick="saveSignature()">
                    确认签名并提交
                </button>
            </div>
        </div>
        <br/>
    </div>
</div>
<script src="#(basePath)/static/js/jquery-2.1.4.js"></script>
<script src="#(basePath)/static/js/jq-signature.min.js"></script>
<script type="text/javascript">
    /*去掉iphone手机滑动默认行为*/
    $('body').on('touchmove', function (event) {
        event.preventDefault();
    });
    $(document).on('ready', function () {
        $('.js-signature').jqSignature();

    });
    //判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
        if (window.orientation === 180 || window.orientation === 0) {
            alert("竖屏");
        }
        if (window.orientation === 90 || window.orientation === -90) {
            alert("横屏");
        }
    }, false);

    function clearCanvas() {
        $('.js-signature').jqSignature('clearCanvas');
        $('#saveBtn').attr('disabled', true).addClass('weui-btn_disabled');
    }

    function initSignature() {
        $('#show').find('.content').empty();
        var dataUrl = $('.js-signature').jqSignature('getDataURL');
        var img = $('<img>').attr('src', dataUrl);
        $('#show').find('.content').append($('<p style="padding: 5px 10px;text-align: left">').text("这是你的签名:")).append(img);
        $('#show').show();
        $('#editor').hide();
    }

    function saveSignature(){
        var dataUrl = $('#show').find('img').attr('src');
        parent.sumitISignatureImageFile(dataUrl);
    }

    $('.js-signature').on('jq.signature.changed', function () {
        $('#saveBtn').attr('disabled', false).removeClass('weui-btn_disabled');
    });
</script>
</body>
</html>